<template>
    <div class="common-layout">
        <el-container>
            <el-header class="home-header">
                <div style="display: flex;justify-content: space-between;margin:10px 50px;font-family: 幼圆;">
                    <el-link >
                      <div style="display: flex;align-items: center">
                        <img src="../assets/logo.png" style="width: 45px;"/>
                        <el-text style="font-size: 20px;font-weight: bold;color: white;margin-left: 10px;">个人健康管理系统</el-text>
                      </div>
                    </el-link>
                    <el-row>
                        <el-col :span="12">
                            <el-dropdown @command="handleCommand">
                                <div class="avatar" style="width: 120px;margin-top: 12px;font-family: 幼圆;font-size: 18px;font-weight: bold;color: white;">{{userInfo.userName}}</div>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item command="a"><el-icon><User /></el-icon>个人中心</el-dropdown-item>
                                        <el-dropdown-item command="b"><el-icon><SwitchButton /></el-icon>退出登录</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </el-col>
                        <el-col :span="12">
                            <el-avatar :size="size" :src="userInfo.avatar"/>
                        </el-col>
                    </el-row>
                </div>
            </el-header>
            <el-container>
                <el-aside class="home-aside">
                    <el-menu class="el-menu-vertical-demo" router background-color="#50C3E2" text-color="#EAF2E9">
                        <el-menu-item index="index_datav">
                            <el-icon><House /></el-icon>
                            <span slot="title">首页</span>
                        </el-menu-item>
                        <el-sub-menu :index=String(menu.id) v-for="(menu,index) in list" :key="menu.id">
                            <template #title>
                                <el-icon>
                                    <component :is="menu.icon"/>
                                </el-icon>
                                <span>{{menu.menuName}}</span>
                            </template>
                            <el-menu-item :index="item.path" v-for="(item,index) in menu.children" :key="item.id">
                                <el-icon>
                                    <component :is="item.icon"/>
                                </el-icon>
                                <span>{{item.menuName}}</span>
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <el-main style="background-color:#f6f6f6;">
                    <el-breadcrumb separator="/" style="height: 20px">
                        <el-breadcrumb-item :to="{ path:'/index_datav'}">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>{{ currentPathName }}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <div style="padding:20px 0;">
                        <!-- DOM渲染 -->
                        <router-view>

                        </router-view>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        components: {},
        props: {},
        data() {
            return {
                userInfo:[],
                list:[],
            };
        },
        watch: {},
        computed: {
            currentPathName() {
                return this.$store.state.currentPathName;
            }
        },
        methods: {
            //获取用户信息
            getUser(){
              this.$http.get("user/getUserById").then((res)=>{
                  console.log(res)
                  this.userInfo=res.data.data;
              })
            },
            handleCommand(command){
                // console.log(command)
                if (command==='a'){
                    //路由跳转到个人中心
                    this.$router.push('/person');
                }else {
                    sessionStorage.clear();
                    this.$router.push("/");
                }
            },
            getMenus(){
                this.$http.get("getMenus").then((res)=>{
                    // console.log(res)
                    this.list=res.data.data;
                })
            }
        },
        created() {
            this.getUser();
        },
        mounted() {
            this.getMenus();
            this.$router.push('/index_datav');
        }
    };
</script>
<style scoped>
    :deep(.el-tooltip__trigger:focus-visible) {
        outline: unset;
    }
    .avatar:hover{
        cursor: pointer;
    }
    .home-header{
        background-color: #33b86c;
    }
    .home-aside{
        min-height: 94vh;
        background-color: #50C3E2;
        width: 300px;
    }
    .el-menu-item.is-active{
      color: #ffdf71;
    }
</style>
